<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>removeEventListener</title>
        <style>
            .wrapper { border: 1px solid blue; margin: 15px auto;}
            .wrapper>button { margin: 10px; }
            .wrapper>.box { min-height: 50px; background: #dfdfdf; margin: 10px;}
        </style>
    </head>
    <body>
        <h1>removeEventListener</h1>

        <div class="wrapper">
            <button type="button" class="bind first">绑定监听</button>
            <button type="button" class="remove second">解除绑定</button>
        </div>

        <div class="wrapper">
            <div class="box"></div>
        </div>

        <script>
            (()=>{
                const bindButton = document.querySelector('.bind');
                const removeButton = document.querySelector('.remove');
                const box = document.querySelector('.box');

                const useCapture = false;
                
                const show = e => {
                    let t = e.target; // 获得事件目标(即真正触发事件的元素)
                    let classNames = t.getAttribute('class');
                    console.log( `在${t.nodeName}(${classNames})触发了${e.type}事件` );
                }

                const type1 = 'mouseover';
                const change = e => {
                    let t = e.target; // 获得事件目标(即真正触发事件的元素)
                    let styles = getComputedStyle( e.target ); // Window.prototype.getComputedStyle(element)
                    t.setAttribute( 'data-original-bgcolor', styles.backgroundColor);                        
                    t.style.backgroundColor = '#ffff00';
                }

                const type2 = 'mouseout';
                const recover =  e => {
                    let t = e.target;
                    let bgColor = t.getAttribute('data-original-bgcolor');
                    t.removeAttribute('data-original-bgcolor');
                    t.style.backgroundColor = bgColor;
                }

                // 为 bindButton 绑定 click 事件监听器
                bindButton.addEventListener('click', event => {
                    let target = event.target;
                    let tagName = target.nodeName;
                    let value = target.getAttribute('class');
                    console.log(`在${tagName}(${value})触发了${event.type}事件`);

                    // 为 box 绑定 mouseover 事件监听器
                    box.addEventListener( type1, show, useCapture);
                    // 为 box 绑定 mouseover 事件监听器
                    box.addEventListener( type1, change, useCapture);

                    // 为 box 绑定 mouseout 事件监听器
                    box.addEventListener( type2, show, useCapture );
                    // 为 box 绑定 mouseout 事件监听器
                    box.addEventListener( type2, recover, useCapture);

                }, false);
                
                // 为 removeButton 绑定 click 事件监听器
                removeButton.addEventListener('click', event => {
                    let target = event.target;
                    let tagName = target.nodeName;
                    let value = target.getAttribute('class');
                    console.log(`在${tagName}(${value})触发了${event.type}事件`);
                    
                    // 为 box 移除 type1 对应的监听器( 仅移除 change )
                    box.removeEventListener( type1, change, useCapture);
                    box.removeEventListener( type2, recover, useCapture);
                }, false);
            })();
        </script>

        <p>请在浏览器终端中查看运行结果</p>
    </body>
</html>